<!DOCTYPE html>
<html>
<head>
    <title>AI无纸化会议</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" href="">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet/less" type="text/css" href="css/css.less">
    <script src="js/jq.js"></script>
    <script>
        less = {
            env: "development",
            async: false,
            fileAsync: false,
            poll: 1000,
            functions: {},
            dumpLineNumbers: "comments",
            relativeUrls: false,
            rootpath: "/"
        };
    </script>
    <script src="js/less.min.js"></script>
    <script src="js/resize.js"></script>
</head>
<body>
<div id="page">
    <header class="animated fadeInDown">
        <h1>AI无纸化会议系统</h1>
    </header>

    <main>
        <aside class="left animated fadeInLeft">
            <ul></ul>
            <div class="total">
                <img src="image/icon_unsign.png" alt="">
                <div>
                    &nbsp;未签到人数&nbsp;
                    <strong>0</strong>
                    <p>
                        <span>总参会人数</span>
                        <b>0</b>
                    </p>
                </div>
            </div>
        </aside>

        <section>
            <div id="scan" class="animated zoomIn">
                <video id="img" autoplay muted poster="./img/Demo.jpg"></video>
            </div>
            <footer>
                <div>
                    <h1>本次议题<p>CONFRENCE TOPICS</p></h1>
                    <h3><p>主持人：</p>啊啊啊</h3>
                    <h3><p>会议时间：</p>09:00-11:00</h3>
                </div>
                <ul>
                    <li>1、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊</li>
                    <li>2、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊</li>
                    <li>3、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊</li>
                    <li>4、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊</li>
                    <li>5、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊你对你撒娇</li>
                    <li>6、蛋大赛大手大脚卡萨就卡萨你对你撒娇啊你对你撒娇你对你撒娇</li>
                </ul>
            </footer>
        </section>

        <aside class="right animated fadeInRight">
            <ul></ul>
            <div class="total">
                <div>
                    <strong>0</strong>
                    &nbsp;已签到人数&nbsp;
                    <p>
                        <b>0</b>
                        <span>总参会人数</span>
                    </p>
                </div>
                <img src="image/icon_signed.png" alt="">
            </div>
        </aside>
    </main>
</div>
<script src="js/wfs.js"></script>
<script src="js/js.js"></script>
<script>
    let sign_arr=[],index=0;
    var wfs = null;

    $('#scan').click(function(){
        if($('#img').attr('src')){
            wfs.websocketLoader.client.close();
            wfs.destroy();
            $('#img').attr('src','')
        }else{
            wfs = new Wfs();
            wfs.attachMedia(document.getElementById('img'),'ch1','H264Raw',VIDEO);
        }
    });

    //签到操作
    let setPerson=()=>{
        let obj=sign_arr[index];
        if(!obj){
            setTimeout(setPerson,500);
            return false;
        }
        index++;
        let id=new Date().getTime();
        let dom=`<div class="alert animated fadeInLeft" id="${id}">
            <img src="${toPhoto(obj.capture_photo)}" alt="">
            <h1>${obj.face_name}</h1>
            <p>${obj.depart || '___'}</p>
            <time>签到 ${obj.capture_time.split(' ')[1]}</time>
        </div>`;
        $(dom).appendTo('#page');
        let el=$('#'+id);

        $('#unsign'+obj.user).addClass('fadeOutUp');
        $('#signed'+obj.user).remove();
        $(`<li class="animated fadeInDown" id="${'signed'+obj.user}">
            <img src="${toPhoto(obj.face_photo)}" alt="">
            <div>
                <h2>${obj.face_name || '___'}</h2>
                <small>
                    <span>${obj.depart || '___'}</span>
                    <time>${obj.capture_time.split(' ')[1]}</time>
                </small>
            </div>
        </li>`).prependTo('.right ul');
        setTimeout(e=>{
            $('#unsign'+obj.user).remove();
            $('.left strong').text($('.left li').length);
            $('.right strong').text($('.right li').length);
            all_num();
        },300);

        setTimeout(e=>{
            el.addClass('fadeOutRight');
            setTimeout(()=>{
                el.remove();
                setPerson();
            },300)
        },sign_arr[index]?1000:3000);
    };

    //总数
    let all_num=()=>{
        $('aside p b').text($('.left strong').text()*1+$('.right strong').text()*1);
    };

    //转换图片格式
    let toPhoto=v=>v?IMAGE+v.replace(/\\/g,'/'):'img/headimg.jpg';

    $(function(){
        let Socket = new WebSocket(SOCKET);
        Socket.onmessage=res=>{
            if(res.data.length<5) return false;
            let msg=res.data.split(',');
            ajax('users_by_device_face',{device_id:msg[0],face_id:msg[1]},v=>{
                sign_arr.push(v);
            })
        };

        //$('.left ul').animate({scrollTop:$('.left ul')[0].scrollHeight},500)

        //未签到
        ajax('not_sign_users',{},v=>{
            $('.left strong').text(v.size);
            all_num();
            v.data.length>10?$('.left ul').addClass('large'):$('.left ul.large').removeClass('large');
            for(let x of v.data){
                $(`<li class="animated fadeInDown" id="${'unsign'+x.user}">
                    <img src="${toPhoto(x.face_photo)}" alt="">
                    <div>
                        <h2>${x.face_name || '___'}</h2>
                        <small>${x.depart || '___'}</small>
                    </div>
                </li>`).appendTo('.left ul');
            }
            setPerson();
        });

        //已签到
        ajax('sign_users',{},v=>{
            $('.right strong').text(v.size);
            all_num();
            v.data.length>10?$('.right ul').addClass('large'):$('.right ul.large').removeClass('large');
            for(let x of v.data){
                $(`<li class="animated fadeInDown" id="${'signed'+x.user}">
                    <img src="${toPhoto(x.face_photo)}" alt="">
                    <div>
                        <h2>${x.face_name || '___'}</h2>
                        <small>
                            <span>${x.depart || '___'}</span>
                            <time>${x.capture_time.split(' ')[1]}</time>
                        </small>
                    </div>
                </li>`).appendTo('.right ul');
            }
        });
    });

</script>
<script>
</script>
</body>
</html>
